<template>
  <div class="main-container">
    <TableBody>
      <template #header>
        <TableHeader
            :can-collapsed="
            likeSearchModel.conditionItems &&
            likeSearchModel.conditionItems.length !== 0
          "
            :search-model="likeSearchModel.conditionItems"
            :default-collapsed-state="true"
            title="表格查询"
            @doSearch="doSearch"
            @resetSearch="resetSearch"
        />
      </template>
      <template #tableConfig>
        <TableConfig
            v-model:border="tableConfig.border"
            v-model:stripe="tableConfig.stripe"
            @refresh="doRefresh"
        >
          <template #actions>
            <el-button
                type="primary"
                size="small"
                icon="PlusIcon"
                @click="onAddItem"
            >添加
            </el-button>
            <el-button type="danger" size="small" icon="DeleteIcon"
            >删除
            </el-button>
          </template>
        </TableConfig>
      </template>
      <template #default>
        <el-table
            v-loading="tableLoading"
            :data="dataList"
            :header-cell-style="tableConfig.headerCellStyle"
            :size="tableConfig.size"
            :stripe="tableConfig.stripe"
            :border="tableConfig.border"
            :height="tableConfig.height"
        >
          <el-table-column align="center" label="ID" prop="id" />
          <el-table-column align="center" label="项目ID" prop="campaignid" />
          <el-table-column align="center" label="操作" width="300px">
            <template #default="scope">
              <el-button
                  :disabled="scope.row.roleCode === 'ROLE_admin'"
                  plain
                  type="primary"
                  size="small"
                  @click="onUpdateItem(scope.row)"
              >编辑</el-button
              >
              <el-button
                  :disabled="scope.row.roleCode === 'ROLE_admin'"
                  plain
                  type="danger"
                  size="small"
                  @click="onDeleteItem(scope.row)"
              >删除</el-button
              >
            </template>
          </el-table-column>

        </el-table>
      </template>
      <template #footer>
        <TableFooter
            ref="tableFooter"
            @refresh="doRefresh"
            @pageChanged="doRefresh"
        />
      </template>
    </TableBody>
    <Dialog ref="dialogRef">
      <template #content>
        <BaseForm
            class="padding-left padding-right"
            ref="baseFormRef"
            :form-items="formItems"
        />
      </template>
    </Dialog>
  </div>
</template>

<script lang="ts" setup>
import {
  getDepartmentList2, getDepartmentList3, getKoube,
  getKoubeiPage,
  getKoubeiPages,
  getTableList,
  getUserList,
  getUserListPage,
  getUserListPages
} from "@/api/url";
import {useDataTable, useGet, useLikeSearch, usePost} from "@/hooks";
import { onBeforeMount, onMounted, reactive, ref } from "vue";
import {ElMessage, ElMessageBox} from "element-plus";
import type { TableFooter } from "@/components/types";
import {DialogType} from "@/components/types";
import {get2} from "@/api/http";
const tableFooter = ref<TableFooter>();
const { likeSearchModel, getSearchParams, resetSearch } = useLikeSearch();
const {
  handleSuccess,
  dataList,
  tableConfig,
  tableLoading,
  useHeight,
  offTableCollapseTransition,
} = useDataTable();
const post = usePost();
const get = useGet();
const dialog = ref<DialogType>();
const dialogRef = ref<DialogType>();
const baseFormRef = ref();
const dialogTitle = ref("添加部门");
likeSearchModel.extraParams = () => ({
  ...tableFooter.value?.withPageInfoData(),
});
likeSearchModel.conditionItems = reactive([
  {
    name: "id",
    label: "ID",
    value: "",
    type: "input",
    span: 8,
  },
  {
    name: "campaignid",
    label: "项目ID",
    value: "",
    type: "input",
    span: 8,
  },
]);
const formItems = reactive([
  {
    label: "ID",
    type: "input",
    name: "id",
    value: "",
    maxLength: 50,
    inputType: "text",
    validator: (item: any) => {
      if (!item.value) {
        ElMessage.error(item.placeholder);
        return false;
      }
      return true;
    },
    reset() {
      this.value = "";
    },
  },
  {
    label: "项目ID",
    type: "input",
    name: "campaignid",
    value: "",
    maxLength: 50,
    inputType: "text",
    validator: (item: any) => {
      if (!item.value) {
        ElMessage.error(item.placeholder);
        return false;
      }
      return true;
    },
    reset() {
      this.value = "";
    },
  },
]);
const successHandler = () => {
  ElMessage.success(
      "修改成功"
  );
  dialogRef.value?.close();
  doRefresh;
}
const onAddItem = () => {
  dialogTitle.value = "添加部门";
  formItems.forEach((it: FormItem) => it.reset && it.reset());
  dialogRef.value?.show(() => {

    const formParams = baseFormRef.value?.generatorParams();
    console.log(formParams)
    post({
      url: getKoube,
      data: formParams,
    }).then(successHandler).then(doRefresh)
    dialogRef.value?.close();

  });
};
function onDeleteItem(item: RoleModel) {
  ElMessageBox.confirm("是否要删除此信息，删除后不可恢复？", "提示").then(
      () => {
        get2({
          url: getKoube+'/delete/'+ item.id
        }).then(successHandler).then(doRefresh);
      }
  );
}
function onUpdateItem(item: RoleModel) {
  formItems.forEach((it: FormItem) => {
    const typeName = it.name;
    if (typeName) {
      const typeValue = item[typeName];
      if (typeValue) {
        it.value = item[typeName];
      }
    }
  });
  dialogRef.value?.show(() => {

    const formParams = baseFormRef.value?.generatorParams();
    console.log(formParams)
    formParams.id=item.id;
    post({
      url: getKoube,
      data: formParams,
    }).then(successHandler).then(doRefresh)
    dialogRef.value?.close();
  });
}
const doSearch = () => {
  const params = getSearchParams();
  doRefresh();
  // ElMessageBox.alert(`模拟模糊搜索成功，搜索参数为：${JSON.stringify(params)}`);
};
function doRefresh() {
  get({
    url: getKoubeiPage,
    data: {
      ...tableFooter.value?.withPageInfoData(),
      ...getSearchParams(),
    },
  })
      .then((res: any) => {
        console.log("1111111111");
        console.log(res.data.records);
        // dataList.value = res.data.records;
        // dataList.value?.values(res.data.records)
        tableFooter.value?.setTotalSize(res.data.total);
        get({
          url: getKoubeiPages,
          data: {
            ...tableFooter.value?.withPageInfoData(),
            ...getSearchParams(),
          },
        }).then(handleSuccess)

      })
      .catch(console.log);
}
onMounted(() => {
  doRefresh();
  useHeight();
});
onBeforeMount(offTableCollapseTransition);
</script>

<style lang="scss" scoped>
.avatar-container {
  position: relative;
  width: 30px;
  height: 30px;
  margin: 0 auto;
  vertical-align: middle;
  .avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
  }
  .avatar-vip {
    border: 2px solid #cece1e;
  }
  .vip {
    position: absolute;
    top: 0;
    right: -9px;
    width: 15px;
    transform: rotate(60deg);
  }
}
.gender-container {
  .gender-icon {
    width: 20px;
  }
}
</style>
